<script lang="ts" setup>
import { formatNumber } from '@/home/utils/format';

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})
</script>

<template>
  <RouterLink class="page-home-recommend-article block" :to="`/explore/journalism/detail/${props.data?.informationId}`">
    <div class="border-b-1 border-hex-fafafa border-solid py-20">
      <h3 class="line-clamp-2">
        <span v-if="props.data.isSelected == '1'" class="mr-8 inline-block rounded-2 bg-#e8f4ff px-6 py-3 vertical-middle text-12 text-#345DE2 font-400 leading-16">{{ $t('mobile.common.prime') }}</span>
        <span class="break-all vertical-middle text-16 color-hex-292929 font-500 leading-24">{{ props.data.informationTitle }}</span>
      </h3>
      <div class="mt-6 flex gap-16">
        <p class="line-clamp-2 w-258 break-anywhere text-justify text-14px color-hex-575757 font-400 leading-22">{{ props.data.informationMsg }}</p>
        <img :data-src="props.data.informationUrl" :alt="props.data.informationTitle" class="lozad size-full h-44 w-76 rounded-2 bg-#f7f7f7 object-contain">
      </div>

      <div class="mt-8 flex-y-center">
        <div class="text-12 text-hex-575757 font-400">
          <span class="leading-16">{{ $t('mobile.home.journalism.read', { view: formatNumber(props.data.informationViews) }) }}</span>
          <span class="mx-4">·</span>
        </div>
        <div class="text-12 text-hex-575757 font-400">
          <span class="leading-16">{{ $t('mobile.home.journalism.like', { like: formatNumber(props.data.informationLikeNum) }) }}</span>
          <span class="mx-4">·</span>
        </div>
        <div class="text-12 text-hex-575757 font-400">
          <span class="leading-16">{{ $t('mobile.home.journalism.collect', { collect: formatNumber(props.data.informationCollectNum) }) }}</span>
        </div>
      </div>
    </div>
  </RouterLink>
</template>

<style lang="scss" scoped>
</style>
